import Sact from "sact";
import iconButton from "./icon-button.js"
import chatMessageList from "./chatMessageList.js"
import modal from "./modal.js"
let template = `
<div class="file-xx-card chatWarpper chatAnimation">
    <div class="chatHeader">
        <icon-button :click="props.backtomain" icon="chevron_left"></icon-button>
        <span class="chatTargetName cut-text">
            {{name}}
        </span>
        <icon-button :click="props.gotomore" icon="more_vert"></icon-button>
    </div>
    <msglist :_cid="_cid" :hasDone="hasDone" :ref="ref" :messageList="messageList" @loadMore="loadMore"></msglist>
    <div class="chatInputBox">
        <input style="flex: 1;max-height: 40vh;margin-right: 8px;overflow: auto;border: none;padding: 4px 8px;outline: none;min-height: 20px;border-radius: 4px;
        line-height: 20px;resize: none;background: #fff;caret-color: rgb(150,237,107);" class="input" :value="msg" @input="whenInput" @keypress="whenPress" />
        <div class="chatVcenter">
            <icon-button @click="open('emoji')" icon="tag_faces"></icon-button>
            <icon-button @click="open('more')" s-if="!msg" icon="add_circle_outline"></icon-button>
            <button @click="sendMsg" s-if="msg" style="background-color:#06ae56;height: 30px;margin-left:8px"
                class="chatInputBtn">发送</button>
        </div>
    </div>
    <div :key="'emoji'" class="chatBottomBox" s-if="show.bottombox">
        <div class="chatEmojiBox">
            <div @click="addEmoji(emoji)" s-for="emoji in smileys" class="chatEmoji">{{emoji}}</div>
        </div>
    </div>
    <div :key="'function'" class="chatBottomBox" s-if="show.more">
        <modal :show="show.img" title="添加图片网址" @ok="addImg" @cancel="closeImg">
            <textarea class="mdui-textfield-input" :value="imgUrl" @input="imgUrl = $event.target.value"
                placeholder="图片网址"></textarea>
        </modal>
        <div class="chatEmojiBox">
            <div @click="show.img = true;" class="chatfunction">
                <i class="mdui-icon material-icons">image</i>
                <div>图片</div>
            </div>
            <div class="chatfunction">
                <i class="mdui-icon material-icons">insert_drive_file</i>
                <div>文件</div>
            </div>
        </div>
    </div>
</div>`
export default Sact.component({
    template,
    name: "chat",
    component: {
        "icon-button": iconButton,
        "msglist":chatMessageList,
        modal,
    },
    data() {
        return {
            name: "默认名称",
            messageList: [],
            msg: "",
            menbers: [],
            _cid: 0,
            show:{
                bottombox:false,
                more:false,
                img:false,
            },
            imgUrl:"",
            hasDone:false,
        }
    },
    props: ["gotomore","backtomain"],
    beforeMount() {
        //装载信息
        let chat = this.chat = client.imaTaiKai;
        this.data.name = chat.chatName;
        this.data.menbers = chat.members;
        this.data._cid = client.uid;
        this.data.hasDone = chat.HistoryHasDone || false;
        //全部已读
        chat.read();
        if (chat.History.length === 0) {
            this.getHistory()
        }
        else {
            this.data.messageList = this.chat.History;
            this.chat.History =this.data.messageList; 
        }
    },
    method: {
        whenPress(e){
            if(e.key === "Enter"){
                this.sendMsg();
            }
        },
        addImg(){
            this.data.show.img = false;
            showMessage("很抱歉暂时不支持图片发送");
        },
        closeImg(){
            this.data.show.img = false;
        },
        loadMore(callback){
            this.getHistory(callback)
        },
        open(tag){
            let s = this.data.show;
            if(tag === "more"){
                s.more = !s.more;
                s.bottombox = false;
            }
            else{
                s.more = false;
                s.bottombox = !s.bottombox;
            }
        },
        addEmoji(emoji){
            this.data.msg += emoji;
        },
        getHistory(callback) {
            client.getHistory(() => {
                this.data.messageList = this.chat.History;
                this.chat.History =this.data.messageList; 
                this.data.hasDone = this.chat.HistoryHasDone || false;
                callback && callback();
            })
        },
        whenInput(e) {
            this.data.msg = e.target.value;
        },
        sendMsg() {
            if (this.data.msg !== "") {
                client.sendMessage(this.data.msg, (mes) => {
                    this.data.msg = "";
                    this.msgListSact && this.msgListSact.toEnd()
                })
            }
        },
        ref(sact){
            this.msgListSact = sact;
        },
    }
})